/*-----------------------------------------------------------------------------------

  Template Name: Pixal - Creative Template CSS
  Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1.    Common CSS & Section Title
    2.    Menu Section
	3.    Hero Section
	4.    About Section
	5.    Portfolio Section
	6.    Service Section
	7.    Testimonial Section
	8.    Footer Section
	9.    Responsive CSS
	
-----------------------------------------------------------------------------------*/

/* -----------------------------------
    1. Common CSS & Section Title
--------------------------------------*/

/*-- Common CSS --*/
[class^="cr-"] h1, [class*="cr-"] h1,
[class^="cr-"] h2, [class*="cr-"] h2,
[class^="cr-"] h3, [class*="cr-"] h3,
[class^="cr-"] h4, [class*="cr-"] h4,
[class^="cr-"] h5, [class*="cr-"] h5,
[class^="cr-"] h6, [class*="cr-"] h6 {
  color: #ffffff;
}
[class^="cr-"] p, [class*="cr-"] p,
[class^="cr-"] span, [class*="cr-"] span {
  color: #cccccc;
}


/*-- Section Title --*/
.cr-section-title {
  padding-bottom: 45px;
}
.cr-section-title::before, .cr-section-title::after {
  background-color: #fbb03b;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -30px;
  position: absolute;
  width: 60px;
}
.cr-section-title::after {
  bottom: 10px;
  margin-left: -50px;
  width: 100px;
}
.cr-section-title h3 {
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 18px;
  margin: 0;
  text-transform: uppercase;
}
.cr-section-title p {
  margin: 30px auto 0;
  max-width: 710px;
}

/*-- Header Stick --*/
.cr-header-section.stick {
  background-color: #06052D;
}

/* -----------------------------------
    2. Menu Section
--------------------------------------*/
.cr-menu-section {
  background-color: rgba(5, 14, 48, 0.95);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  text-align: center;
  top: 0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 100%;
  z-index: 999;
}
.cr-menu-section .container {
  margin: auto;
}
.cr-menu-section.active {
  opacity: 1;
  visibility: visible;
}

/*---- Menu ----*/
.cr-menu {
  padding: 80px 0 50px;
}
.cr-menu ul {}
.cr-menu ul li {
  margin-bottom: 40px;
}
.cr-menu ul li:last-child {
  margin-bottom: 0;
}
.cr-menu ul li a {
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
}
.cr-menu ul li a:hover, .cr-menu ul li.active a {
  color: #fbb03b;
  font-size: 24px;
}


/* -----------------------------------
    3. Hero Section
--------------------------------------*/
.cr-hero-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.cr-hero-section .container {
  margin: auto;
}

/*-- Hero Content --*/
.cr-hero-content {
  pointer-events: auto !important;
}
.cr-hero-content h1 {
  font-size: 80px;
  font-weight: 800;
  line-height: 90px;
  margin: 0 auto 57px;
  max-width: 900px;
}
.cr-hero-content a.btn {}


/* -----------------------------------
    4. About Section
--------------------------------------*/
.cr-about-section {}

/*-- About Video --*/
.cr-about-video {
  margin-left: 70px;
  position: relative;
}
.cr-about-video::before {
  background-color: #05082e;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
.cr-about-video img {
  width: 100%;
}

/*-- Video PupUp --*/
.cr-about-video a.video-popup {
  border-radius: 50%;
  height: 44px;
  left: 50%;
  margin-left: -22px;
  margin-top: -22px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 44px;
  z-index: 9;
}
.cr-about-video a.video-popup img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  width: 100%;
}
.cr-about-video a.video-popup:hover img {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}

/*-- About Content --*/
.cr-about-content {}
.cr-about-content p {
  margin-bottom: 30px;
}
.cr-about-content a.btn {
  margin-top: 23px;
}


/* -----------------------------------
    5. Portfolio Section
--------------------------------------*/
.cr-portfolio-section {}

/*-- Portfolio Item --*/
.cr-isotop-item {
  overflow: hidden;
  padding: 0;
}
.cr-isotop-item img {
  width: 100%;
}

/*-- Portfolio Content --*/
.cr-portfolio-content {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*-- Portfolio Hover Shape --*/
.cr-portfolio-content .shape {
  background-color: #fbb03b;
  display: block;
  float: left;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 50%;
}
.cr-portfolio-content .shape:nth-child(1) {
  left: 0;
}
.cr-portfolio-content .shape:nth-child(2) {
  right: 0;
}
.cr-isotop-item:hover .cr-portfolio-content .shape {
  opacity: 0.8;
}
.cr-isotop-item:hover .cr-portfolio-content .shape:nth-child(1) {
  top: -30px;
}
.cr-isotop-item:hover .cr-portfolio-content .shape:nth-child(2) {
  top: 30px;
}

/*-- Portfolio Text --*/
.cr-portfolio-content .text {
  color: #050d30;
  font-size: 14px;
  font-weight: 700;
  left: 0;
  letter-spacing: 2px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cr-isotop-item:hover .cr-portfolio-content .text {
  opacity: 1;
}


/* -----------------------------------
    6. Service Section
--------------------------------------*/
.cr-service-section {}

/*-- Single Service --*/
.cr-single-service {}
.cr-single-service i {
  display: block;
  font-size: 36px;
  margin-bottom: 25px;
  padding-bottom: 30px;
  position: relative;
  margin-top: 0;
}
.cr-single-service i::after {
  background-color: #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  opacity: 0.4;
  position: absolute;
  width: 60px;
}
.cr-single-service h3 {
  font-weight: 300;
  line-height: 28px;
  margin-bottom: 26px;
}
.cr-single-service p {
  line-height: 24px;
  margin-bottom: 0;
  max-width: 270px;
}


/* -----------------------------------
    7. Testimonial Section
--------------------------------------*/
.cr-testimonial-section {}

/*-- Testimonial Slider --*/
.cr-testimonial-slider {}

/*-- Single Testimonial --*/
.cr-single-testimonial {
  position: relative;
}
.cr-single-testimonial .cr-bg-quote {
  left: 50%;
  margin-top: 30px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}
.cr-single-testimonial img.cr-testimonial-client {
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 0 auto 85px;
  width: 100px;
}
.cr-single-testimonial p {
  font-size: 18px;
  line-height: 36px;
  margin-bottom: 80px;
}
.cr-single-testimonial h5 {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 12px;
  margin-bottom: 9px;
}
.cr-single-testimonial span {
  display: block;
  font-size: 15px;
  line-height: 24px;
}


/* -----------------------------------
    8. Footer Section
--------------------------------------*/
.cr-footer-section {}

/*-- Contact Form --*/
.cr-contact-form {}
.cr-contact-form form {}
.cr-contact-form form input[type="text"], .cr-contact-form form input[type="email"] {
  background-color: #100f3c;
  border: 1px solid #23233a;
  border-radius: 5px;
  color: #a5a5a5;
  display: block;
  font-size: 13px;
  height: 44px;
  line-height: 24px;
  margin-bottom: 18px;
  padding: 9px 20px;
  width: 100%;
}
.cr-contact-form form textarea {
  background-color: #100f3c;
  border: 1px solid #23233a;
  border-radius: 5px;
  color: #a5a5a5;
  display: block;
  font-size: 13px;
  height: 100px;
  line-height: 24px;
  margin-bottom: 18px;
  padding: 9px 20px;
  resize: none;
  width: 100%;
}
.cr-contact-form form input[type="submit"] {
  background-color: #100f3c;
  border: 1px solid #23233a;
  border-radius: 5px;
  color: #ffffff;
  display: block;
  font-size: 13px;
  height: 44px;
  letter-spacing: 1px;
  line-height: 24px;
  margin-bottom: 18px;
  padding: 9px 20px;
  text-transform: uppercase;
  width: 100%;
}
.cr-contact-form form input[type="submit"]:hover {
  color: #fbb03b;
}

/*-- Footer Social --*/
.cr-footer-social {}
.cr-footer-social a {
  color: #ffffff;
  display: inline-block;
  margin: 0 15px;
}
.cr-footer-social a:hover {
  color: #fbb03b;
}
.cr-footer-social a i {
  display: block;
  font-size: 22px;
  line-height: 20px;
}

/*-- Footer --*/
.cr-footer {
  border-top: 1px solid #161649;
  padding: 16px 0;
}
.cr-footer-copyright {}
.cr-footer-copyright p {
  color: #cccccc;
  font-size: 12px;
  font-weight: 600;
  line-height: 28px;
  margin: 0;
}
.cr-footer-copyright p a {
  color: inherit;
}
.cr-footer-copyright p a:hover {
  color: #fbb03b;
}

/*-- Footer Menu --*/
.cr-footer-menu {
  text-align: right;
}
.cr-footer-menu ul {
  display: inline-block;
  vertical-align: top;
}
.cr-footer-menu ul li {
  display: block;
  float: left;
  margin-left: 45px;
}
.cr-footer-menu ul li:first-child {
  margin-left: 0;
}
.cr-footer-menu ul li a {
  color: #cccccc;
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 28px;
}
.cr-footer-menu ul li a:hover {
  color: #fbb03b;
}


/* -----------------------------------
    9. Responsive CSS
--------------------------------------*/

/*-- Laptop Screen --*/
@media only screen and (min-width: 1171px) and (max-width: 1400px) {


}


/*-- Desktop : 992px --*/
@media only screen and (min-width: 992px) and (max-width: 1169px) {
.cr-about-content a.btn {
  margin-top: 0;
}
.cr-about-video {
  margin-left: 0;
}


}


/*-- Tablet : 768px --*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
/*Creative*/
.cr-hero-content h1 {
  font-size: 60px;
  line-height: 70px;
  margin-bottom: 40px;
}
.cr-about-content a.btn {
  margin-top: 0;
}
.cr-about-video {
  margin-left: 0;
}
.cr-footer-menu ul li {
  margin-left: 25px;
}
.cr-footer-menu ul li a {
  font-size: 11px;
}


}


/*-- Large Mobile : 480px --*/
@media only screen and (max-width: 767px) {
.cr-section-title {
  margin-bottom: 70px;
}
.cr-menu-section {
  overflow-y: scroll;
}
.cr-menu-section > .container {
  width: 100%;
}
.cr-menu ul li {
  margin-bottom: 10px;
}
.cr-menu ul li a {
  font-size: 14px;
}
.cr-menu ul li a:hover, .cr-menu ul li.active a {
  font-size: 18px;
}
.cr-hero-section {
  height: auto;
}
.cr-hero-content {
  padding-bottom: 100px;
  padding-top: 150px;
}
.cr-hero-content h1 {
  font-size: 36px;
  line-height: 44px;
  margin: 0 auto 30px;
}
.cr-about-section {
  padding: 100px 0 60px;
}
.cr-about-content a.btn {
  margin-top: 0;
}
.cr-about-video {
  margin-left: 0;
}
.cr-service-section {
  padding: 100px 0 50px;
}
.cr-single-service {
  margin-bottom: 50px;
}
.cr-single-service h3 {
  margin-bottom: 20px;
}
.cr-testimonial-section {
  padding: 100px 0;
}
.cr-single-testimonial img.cr-testimonial-client {
  margin-bottom: 40px;
}
.cr-single-testimonial p {
  margin-bottom: 40px;
}
.cr-contact-section {
  padding-top: 100px;
}
.cr-footer-copyright {
  text-align: center;
}
.cr-footer-menu {
  text-align: center;
}
.cr-footer-menu ul li {
  margin-left: 25px;
}
.cr-footer-menu ul li a {
  font-size: 11px;
}


}


/*-- small mobile : 320px --*/
@media only screen and (max-width: 479px) {
.cr-section-title {
  padding-bottom: 35px;
}
.cr-section-title h3 {
  font-size: 18px;
  line-height: 1.2;
}
.cr-section-title p {
  font-size: 14px;
  line-height: 24px;
  margin-top: 20px;
}
.cr-hero-content {
  padding-bottom: 50px;
  padding-top: 100px;
}
.cr-hero-content h1 {
  font-size: 22px;
  line-height: 32px;
  margin: 0 auto 20px;
}
.cr-single-service h3 {
  font-size: 20px;
}


}